@import "../global";

#case-detail {
  .main {
    background: #eaeaea;
  }
  .case-box {
    padding: 0;
  }
  .swiper-slide {
    &:hover {
      .hover-content {
        display: block;
      }
    }
    img {
      display: block;
      width: 100%;
    }
    .hover-content {
      display: none;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 20px 130px 30px;
      color: #fff;
      background: rgba(0,0,0,.6);
      .tag {
        display: inline-block;
        padding: 10px 20px;
        border: 2px solid #fff;
      }
      .txt {
        margin-top: 20px;
        color: #fff;
      }
    }
  }
  .case-description {
    padding: 30px 130px;
    color: #333;
  }
  .right-bar {
    background: #eaeaea;
    padding: 0;
    .designer {
      padding: 20px 35px;
      border-bottom: 1px solid #d1d1d1;
      .designer-img {
        width: 60px;
        height: 60px;
        overflow: hidden;
        margin-right: 15px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .designer-info {
        overflow: hidden;
        margin-left: 15px;
        .d1 {
          line-height: 20px;
          color: #333;
          .name {
            font-size: 20px;
            padding-right: 15px;
            border-right: 1px solid #333;
          }
        }
        .d2 {
          margin-top: 10px;
        }
      }
    }
    .case-detail {
      padding: 30px 35px 20px 35px;
      border-bottom: 1px solid #d1d1d1;
      .case {
        h2 { font-size: 24px; line-height: 1;}
        .tags {
          margin: 15px 0 10px;
          line-height: 1;
          color: #0a83d7;
          .tag {
            float: left;
            padding: 0 15px;
            border-left: 1px solid #333;
            &:first-of-type {
              padding-left: 0;
              border-left: none;
            }
          }
        }
        .cc {
          line-height: 32px;
          em {
            width: 64px;
            float: left;
          }
        }
      }
      .other-picture {
        margin-top: 10px;
        dt {
          line-height: 40px;
          font-size: 20px;
        }
        .img-list {
          font-size: 0;
          img {
            width: 90px;
            height: 90px;
            margin: 0 10px 10px 0;
            cursor: pointer;
          }
        }
      }
    }
    .relate-case {
      padding: 20px 25px;
      dt {
        font-size: 20px;
        line-height: 40px;
        margin-bottom: 10px;
      }
      dd {
        margin-bottom: 30px;
        &.col-xs-6 {
          width: ~'calc(50% - 10px)';
          padding: 0;
          margin-right: 10px;
        }
        .img {
          width: 100%;
          img { display: block;
            width: 100%;
          }
        }
        .content {
          line-height: 1.2;
          padding: 5px 0;
          p {
            &:first-of-type { color: #575757;}
            &:last-of-type { font-size: 18px; color: #333;}
          }
        }
      }
    }
  }
}
